<template>
  <div v-loading="loading">
    <el-main class="common-container">
      <div class="app-main-tips-box tip-box">
        <div class="title"><i class="el-icon-warning" /> 导航说明</div>
        <ul>
          <li>
            1.tabbar其中固定一项为首页，包含首页在内最少需要2个导航项目，最多可添加5个导航项目。
          </li>
          <!--          <li>2.可长按列表拖动排序。</li>-->
        </ul>
      </div>
      <!-- 列表 -->
      <ul class="bar-list">
        <!--        <draggable :list="form.tabBarList">-->
        <li v-for="(item, index) in form.tabBarList" :key="index" class="cell-item">
          <el-card class="card-container">
            <div class="flexRBC">
              <div class="flexRSC">
                <div class="public-box">
                  <div class="icon-title">选中图标</div>
                  <div class="icon-box">
                    <img v-if="item.selectedIcon" :src="fileBaseUrl + item.selectedIcon" class="img">
                  </div>
                </div>
                <div class="public-box">
                  <div class="icon-title">未选中图标</div>
                  <div class="icon-box">
                    <img v-if="item.icon" :src="fileBaseUrl + item.icon" class="img">
                  </div>
                </div>
                <!-- 类型 -->
                <div class="public-box info-box">
                  <div class="info-title">
                    导航名称{{
                      item.openInsidePage == "homepage" ? "（首页）" : ""
                    }}：{{ item.title }}
                  </div>
                  <div class="info-des">
                    {{ item.openInsideParams.remark }}
                  </div>
                </div>
              </div>
              <div class="btn-group">
                <el-button type="primary" size="small" round @click="edit(item, index)">编辑</el-button>
                <el-button type="danger" size="small" round @click="del(index)">删除</el-button>
              </div>
            </div>
          </el-card>
        </li>
        <!--        </draggable>-->
        <li v-if="form.tabBarList.length <= 5" class="cell-item">
          <el-card class="card-container flexRCC i-plus-box" @click.native="add">
            <i class="el-icon-plus" />
          </el-card>
        </li>
        <li class="flexRCC" style="margintop: 30px">
          <el-button type="primary" round size="small" @click="submit">保 存</el-button>
          <el-button round size="small" @click="fetchData">取 消</el-button>
        </li>
      </ul>
    </el-main>

    <!-- 组件 -->
    <DialogEditTabBar ref="editTabBar" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getWxaConfig, editWxaConfig } from '@/views/wxaBuildModule/api/config'
import DialogEditTabBar from './components/DialogEditTabBar'
import Draggable from 'vuedraggable'
export default {
  components: {
    DialogEditTabBar,
    Draggable
  },
  data() {
    return {
      // 配置
      // 状态
      loading: false,
      // 数据
      classifyCode: 'DEFAULT',
      form: {
        tabBarList: []
      }
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  created() {},
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
       * 数据组
       */
    // 获取数据
    fetchData() {
      const params = {
        classifyCode: this.classifyCode
      }
      this.loading = true
      getWxaConfig(params)
        .then((res) => {
          res.data.tabBarList.forEach((v) => {
            v.openInsideParams = v.openInsideParams
              ? JSON.parse(v.openInsideParams)
              : {}
          })
          this.form = res.data
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false
        })
    },

    /**
       * 按钮组
       */
    // 新增
    add() {
      this.$refs.editTabBar.open({ mode: 'add' }).then((res) => {
        this.form.tabBarList.push(res)
      })
    },

    // 编辑
    edit(item, index) {
      this.$refs.editTabBar.open({ mode: 'edit', row: item }).then((res) => {
        this.form.tabBarList[index] = res
        this.form = JSON.parse(JSON.stringify(this.form))
      })
    },

    // 删除
    del(index) {
      this.form.tabBarList.splice(index, 1)
    },

    // 保持
    submit() {
      const form = JSON.parse(JSON.stringify(this.form))
      form.tabBarList.forEach((v) => {
        v.openInsideParams = JSON.stringify(v.openInsideParams)
      })
      this.loading = true
      const params = {
        classifyCode: this.classifyCode
      }
      const data = {
        id: form.id,
        tabBarList: form.tabBarList
      }
      editWxaConfig({ params, data })
        .then((res) => {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false
        })
    }

    /**
       * 状态组
       */
    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 页面  */
  .common-container {
    overflow: auto;
    height: calc(100vh - 100px);
    margin-left: 20px;
    background-color: #fff;
    border-radius: 5px;
  }

  /* 说明 */
  .tip-box {
    max-width: 1000px;
  }
  /* 内容 */
  .bar-list {
    margin-top: 20px;
    max-width: 1000px;
    .cell-item {
      cursor: move;
      margin-bottom: 10px;
      .card-container {
        width: 100%;
      }
      .public-box {
        margin-right: 30px;
      }
      /* icon */
      .icon-title {
        text-align: center;
        font-size: 12px;
        margin-bottom: 5px;
      }
      .icon-box {
        width: 80px;
        height: 80px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
      /* 内容 */
      .info-box {
        .info-title {
          margin-bottom: 10px;
          font-weight: bold;
        }
        .info-des {
          font-size: 14px;
        }
      }
      /* 新增按钮 */
      .i-plus-box {
        .el-icon-plus {
          font-size: 30px;
        }
      }

      /* 按钮组 */
      .btn-group {
        display: flex;
        flex: 0 0 200px;
        justify-content: flex-end;
      }
    }
  }
</style>
